<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 
          功能：切换元素显示&隐藏
            v-if / v-else-if / v-else
            v-show
          区别：
            隐藏时v-if将元素从DOM树中移除，v-show是通过样式display:none隐藏的
  
          频繁切换元素的显示&隐藏，用哪个性能更好？ v-show
          如果不频繁？ v-if
         -->
      
         <p v-if="visible">独断万古荒天帝</p>
         <p v-show="visible">独断万古荒天帝</p>
         <!-- //点击按钮就让元素消失 直接取反就行 -->
         <button @click="visible = !visible">按钮</button>


         <p v-if="true">数据1</p>
         <p v-if="true">数据2</p>
         <p v-if="true">数据3</p>
         <p v-if="true">数据4</p>
         <p v-else-if="true">数据5</p>
         <p v-else-if="false">数据6</p>
         <p v-else="true">数据7</p>

        
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        data:{
          //设置隐藏
            visible:true,
        }
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
